<style >
  @import url("../../../assets/home/css/comm.css");
  @import url("../../../assets/home/css/user.css");
  html,body{background: #f5f5f5!important;}

  .user-mid{margin-top: 40px;position: relative;padding-left: 236px;padding-right: 20px;}
  .user-mid-left{position: absolute;top:0px;left:0px;width:216px;background: #ffffff;bottom:0px}
  .user-mid-right{min-height:600px}

  /* 弹窗样式 */
  .muser-alert{position: fixed;top:0px;left:0px;right:0px;bottom:0px;width:100%;z-index: 1000;}
  .muser-alert-bg{position: absolute;top:0px;left:0px;right:0px;bottom:0px;width:100%;background: rgba(0,0,0,0.6);}
  .muser-alert-container{background: #ffffff;border-radius: 16px;margin: 0px auto;position: relative;width:580px;position: relative;top:50%;}
  .muser-alert-title{height:58px;line-height: 58px;border-bottom: 1px solid #EEEEEE;padding: 0px 0px 0px 20px;color:#EA312B;font-size: 18px;text-align: left;}
  .muser-alert-mid{padding: 20px;}
  .muser-alert-bot{padding: 0px 20px 30px 20px;text-align: right;}
  .muser-alert-close{position: absolute;top:13px;right:13px;background: url(../../../assets/home/img/close_16.png) no-repeat center;height:32px;width:32px;cursor: pointer;}
  a.muser-alert-btn{display: inline-block;text-align: center;margin-left: 10px;height:40px;line-height: 40px;width:100px;border:1px solid #EEEEEE;border-radius: 4px;color:#333333;font-size: 14px;}
  a.muser-alert-btn-red{display: inline-block;text-align: center;height:40px;margin-left: 10px;line-height: 40px;width:100px;border:1px solid #EA312B;border-radius: 4px;color:#ffffff;font-size: 14px;background: #EA312B;}
  .user-menu{padding-top: 40px;background: #ffffff;}
  .user-menu-item{}
  .user-menu-parent{padding-left: 58px;padding-right: 30px;height:48px;line-height: 48px;text-align: left;position: relative;font-size: 16px;color:#333333;cursor: pointer;}
  .user-menu-parent.active{color:#EA312B;background: rgba(234,49,43,0.05);border-right: 2px solid #EA312B;}
  /* 展开图标 */
  .user-menu-show-icon{height:10px;width:10px;position: absolute;top:19px;right:20px;background: url(../../../assets/home/img/arrow_1_10.png) no-repeat center;}
  .user-menu-show-icon.active{background: url(../../../assets/home/img/arrow_0_10.png) no-repeat center;}

  /* 菜单图标 */
  .user-menu-icon{height:18px;width:18px;position: absolute;top:15px;left:30px}

  .user-menu-icon.user-home-mico{background: url(../../../assets/home/img/home_0.png) no-repeat center;}
  .user-menu-icon.user-home-mico-active{background: url(../../../assets/home/img/home_1.png)  no-repeat center;}

  .user-menu-icon.user-purchase-mico{background: url(../../../assets/home/img/buy_0.png) no-repeat center;}
  .user-menu-icon.user-purchase-mico-active{background: url(../../../assets/home/img/buy_1.png) no-repeat center;}

  .user-menu-icon.user-order-mico{background: url(../../../assets/home/img/order_0.png) no-repeat center;}
  .user-menu-icon.user-order-mico-active{background: url(../../../assets/home/img/order_1.png) no-repeat center;}

  .user-menu-icon.user-money-mico{background: url(../../../assets/home/img/funds_0.png) no-repeat center;}
  .user-menu-icon.user-money-mico-active{background: url(../../../assets/home/img/funds_1.png) no-repeat center;}

  .user-menu-icon.user-help{background: url(../../../assets/home/img/help_0.png) no-repeat center;}
  .user-menu-icon.user-help-mico-active{background: url(../../../assets/home/img/help_1.png) no-repeat center;}

  .user-menu-icon.user-push-mico{background: url(../../../assets/home/img/promote_0.png) no-repeat center;}
  .user-menu-icon.user-push-mico-active{background: url(../../../assets/home/img/promote_1.png) no-repeat center;}

  .user-menu-icon.user-shop-mico{background: url(../../../assets/home/img/shop_0.png) no-repeat center;}
  .user-menu-icon.user-shop-mico-active{background: url(../../../assets/home/img/shop_1.png) no-repeat center;}

  /* 子菜单 */
  .user-menu-child{padding-left: 58px;padding-right: 30px;height:48px;line-height: 48px;text-align: left;position: relative;font-size: 15px;color:#333333;cursor: pointer;}
  .user-menu-child.active{color:#EA312B;background: rgba(234,49,43,0.05);border-right: 2px solid #EA312B;}

  .m-no-select {
          -webkit-touch-callout: none;
          /* iOS Safari */
          -webkit-user-select: none;
          /* Chrome/Safari/Opera */
          -khtml-user-select: none;
          /* Konqueror */
          -moz-user-select: none;
          /* Firefox */
          -ms-user-select: none;
          /* Internet Explorer/Edge */
          user-select: none;
      }
</style>
<template>
  <div>
    <header-top-index></header-top-index>
    <div class="user-mid">
      <div class="user-mid-left">
        <div class="user-menu m-no-select">
          <div class="user-menu-item" v-for="(item,index) in menuAr">
            <div class="user-menu-parent" :class="item.active && item.child.length<=0?'active':''"  @click="parentMenuSelect(index)">
              <div class="user-menu-icon" :class="item.active && item.child.length<=0?item.activeIcon:item.icon"></div>
              {{item.name}}
              <div class="user-menu-show-icon" v-if="item.child && item.child.length>0" :class="item.active?'active':''"></div>
            </div>
            <!-- 动画animate__animated animate__fadeInDown -->
            <div class="user-menu-son" v-if="item.active && item.child && item.child.length>0">
              <div class="user-menu-child" :class="item2.active?'active':''" v-for="(item2,index2) in item.child" @click="childMenuSelect(item2.code)">{{item2.name}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="user-mid-right">
        <router-view/>
      </div>
    </div>
    <div style="height: 10px;"></div>
    <header-foot-index></header-foot-index>
  </div>
</template>
<script>
import HeaderTopIndex from "../header-top/index";
import HeaderFootIndex from "../header-foot/index";
import { mapState, mapActions } from 'vuex';
import EventBus from "../../../utils/EventBus";
import RidesFloat from "../rides-float";
export default {
  name: 'index',
    components: {RidesFloat, HeaderFootIndex, HeaderTopIndex},
    computed: {
        ...mapState('home/user', [
            "userInfo"
        ]),
    },
  data () {
    return {
      menuAr: [
        {name: '个人主页', code: 'user_index', active: true, icon: 'user-home-mico', activeIcon: 'user-home-mico-active', url: '/user', child: []},
        {name: '批量采购', code: 'user_purchase', active: false, icon: 'user-purchase-mico', activeIcon: 'user-purchase-mico-active', url: '/user/purchase', child: []},
        {name: '订单中心',
          code: 'order',
          active: true,
          icon: 'user-order-mico',
          activeIcon: 'user-order-mico-active',
          url: '',
          child: [
            {name: '订单管理', code: 'order-index', active: false, url: '/user/order'},
            {name: '售后管理', code: 'order-service', active: false, url: '/user/order_service'},
            {name: '底单申请', code: 'order-bottom', active: false, url: '/user/order_bottom'}
          ]},
        {name: '资金管理', code: 'balance', active: false, icon: 'user-money-mico', activeIcon: 'user-money-mico-active', url: '/user/balance', child: []},
        {name: '推广中心', code: 'extension', active: false, icon: 'user-push-mico', activeIcon: 'user-push-mico-active', url: '/user/extension', child: []},
        {name: '个人设置', code: 'account', active: false, icon: 'user-shop-mico', activeIcon: 'user-shop-mico-active', url: '/user/account', child: []},
        {name: '提醒绑定', code: 'account', active: false, icon: 'user-shop-mico', activeIcon: 'user-shop-mico-active', url: '/user/bind', child: []}
      ]
    }
  },

  created () {
      EventBus.$on('menuSelect',code=>{
          var menuData = this.menuAr
          var url = ''
          for (var i = 0; i < menuData.length; i++) {
              this.menuAr[i].active = menuData[i].child.length > 0 ? menuData[i].child : false;
              var childData = menuData[i].child;
              if(childData.length > 0) {
                  for (var j = 0; j < childData.length; j++) {
                      if (childData[j].code === code) {
                          this.menuAr[i].child[j].active = true
                          url = childData[j].url
                      } else {
                          this.menuAr[i].child[j].active = false
                      }
                  }
              } else {
                  if(this.menuAr[i].code == code ) {
                      this.menuAr[i].active = true;
                  } else {
                      this.menuAr[i].active = false;
                  }
              }
          }
      });
  },

  mounted(){
      console.log(this.userInfo);
    if(this.userInfo == null) {
        this.$router.replace({path: '/login/index'});
    }
  },
  methods: {
    /**
     * 父菜单选择
     * @param {Object} index
     */
    parentMenuSelect: function (index) {
      var menuData = this.menuAr
      var url = ''
      if (this.menuAr[parseInt(index)].child.length <= 0) {
        for (var i = 0; i < menuData.length; i++) {
          this.menuAr[i].active = menuData[i].child.length > 0 ? menuData[i].active : false
          var childData = menuData[i].child
          for (var j = 0; j < childData.length; j++) {
            this.menuAr[i].child[j].active = false
          }
        }
        this.menuAr[parseInt(index)].active = true
        url = this.menuAr[parseInt(index)].url
      } else {
        this.menuAr[parseInt(index)].active = !this.menuAr[parseInt(index)].active
      }
      // url跳转
      if (url !== '') {
        this.$router.push(url)
      }
    },
    /**
     * 子菜单选择
     * @param {Object} code
     */
    childMenuSelect: function (code) {
      var menuData = this.menuAr
      var url = ''
      for (var i = 0; i < menuData.length; i++) {
        this.menuAr[i].active = menuData[i].child.length > 0 ? menuData[i].child : false
        var childData = menuData[i].child
        for (var j = 0; j < childData.length; j++) {
          if (childData[j].code === code) {
            this.menuAr[i].child[j].active = true
            url = childData[j].url
          } else {
            this.menuAr[i].child[j].active = false
          }
        }
      }
      // url跳转
      if (url !== '') {
        this.$router.push(url)
      }
    }
  }
}
</script>
